<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/userList.css"/>
		<link rel="stylesheet" type="text/css" href="css/loading.css"/>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="backMeter" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户列表</h1>
		</header>
		<div class="mui-content">
			<div class="page_head">
				<input type="text" name="" id="username" value="" placeholder="请输入用户名或出厂号"/>
				<button id="userquery" type="button" class="mui-btn mui-btn-blue">查询</button>
			</div>
			<!-- 用户信息查询结果显示 -->
			<div id="usermessage" class="userMessage">
				
			</div>
			<ul id="userLists" class="mui-table-view">
				
			</ul>
		</div>

<!-- 103.240.16.153 -->

		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="http://103.59.149.116:6198/hcys/js/mapi.js"></script> -->
		<script src="js/Mobile.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function () {
				// mui.init();
				var myStorage = JSON.parse(localStorage.getItem("users"));
				var glbToken = myStorage.glbToken;
				// 
				mui.showLoading("正在加载中..","div");
				var for_loaded_flag = false;
				if (checkToken(glbToken).status == "ok") {
					var test = getUserTable(glbToken, 1, 20, "", 0);
					var total = getUserTable(glbToken, 1, 20, "", 0).total;
					var userListArr = getUserTable(glbToken, 1, total, "", 0).rows;
					var list = "";
					// flag
					setTimeout(function(){
						if (test.status == "error") {
							mui.hideLoading();
							mui.toast('无记录',{ duration:'short', type:'div' });
						}else {
							for (var i = 0; i < userListArr.length; i++) {
								list += "<li class='mui-table-view-cell mui-media'>"
									+"<a href='javascript:;'>"+"<div class='mui-media-body'>"
									+"<span>姓名：" + userListArr[i].UserName + "&nbsp;&nbsp;" + "</span><br/>"
									+"<span>地址：" + userListArr[i].UserAddress + "&nbsp;&nbsp;" + "</span><br/>"
									+"<span>电话：" + userListArr[i].Phone + "</span><br/>"
									+ "<span style='color: gray;'>用户号："
									+ userListArr[i].UserID + "</span><br/>" + 
									"<span style='color: gray;'>出厂号："
									+ userListArr[i].WaterFactorID + "</span><br/>"
									+ "<p class='mui-ellipsis' style='font-size: 13pt;'>水表号："
									+ userListArr[i].WaterID + "</p>" 
									+ "</div>" + "</a>" + "</li>";
								if (i == userListArr.length-1) {
									mui.hideLoading();
									for_loaded_flag = true;
								}
							}
							var userLists = document.getElementById("userLists");
							userLists.innerHTML = list;
						}
					},100);
					// list = "<ul class='mui-table-view'>" +list+ "</ul>";
				} else{
					app.setState({});
					plus.webview.getLaunchWebview().show("pop-in");
					setTimeout(function(){
						alert("此账号已在其他设备登录,请重新登录!");
						localStorage.clear();
						plus.runtime.restart();
					},30);
				}
				
				setTimeout(function(){
					$(".mui-media").each(function(i, n) {
						$(".mui-media")[i].onclick = function() {
							if (checkToken(glbToken).status == "ok") {
								// 分别取得用户号及水表号
								var userIdList = n.getElementsByTagName("span")[3].innerText.substr(4);
								var waterID = n.getElementsByTagName("p")[0].innerText.substr(4);
								// alert(waterID)
								// localStorage.setItem('userIds', JSON.stringify(userIdList));
								// 返回用户号及水表号到meterReading页面
								mui.plusReady(function () {
									var mR = plus.webview.currentWebview().opener();
									mui.fire(mR, "select",{userIdList:userIdList, waterID:waterID});
									mui.back();
								})
							} else{
								app.setState({});
								plus.webview.getLaunchWebview().show("pop-in");
								setTimeout(function(){
									alert("此账号已在其他设备登录,请重新登录!");
									localStorage.clear();
									plus.runtime.restart();
								},30)
							}
						}
					});
				},100);
				

				// 查询某一个用户的信息
				mui(".page_head").on("tap", "#userquery", function(){
					var myStorage = JSON.parse(localStorage.getItem("users"));
					var glbToken = myStorage.glbToken;
					if (checkToken(glbToken).status == "ok") {
						var userName = $("#username").val();
						var userListArr = getUserTable(glbToken, 1, 20, userName, 0);
						if (userName == "") {
							alert("用户名或水表出厂号不能为空");
						} else if(userListArr.status == "error") {
							alert("无此用户");
						}else{
							userListArr = getUserTable(glbToken, 1, 20, userName, 0).rows;
							var list = "";
							for (var i = 0; i < userListArr.length; i++) {
								list += "<ul class='mui-table-view'>"
									+"<li class='mui-table-view-cell mui-media'>"
									+"<a href='javascript:;'>"+"<div class='mui-media-body'>"
									+"<span>姓名：" + userListArr[i].UserName + "&nbsp;&nbsp;" + "</span><br/>"
									+"<span>地址：" + userListArr[i].UserAddress + "&nbsp;&nbsp;" + "</span><br/>"
									+"<span>电话：" + userListArr[i].Phone + "</span><br/>"
									+ "<span style='color: gray;'>用户号："
									+ userListArr[i].UserID + "</span><br/>"
									+ "<span style='color: gray;'>出厂号："
									+ userListArr[i].WaterFactorID + "</span>"
									+ "<p class='mui-ellipsis' style='font-size: 13pt;'>水表号："
									+ userListArr[i].WaterID + "</p>" 
									+ "</div>" + "</a>" + "</li>" + "</ul>";
							}
							// list = "<ul class='mui-table-view'>" +list+ "</ul>";
							var userLists = document.getElementById("usermessage");
							userLists.innerHTML = list;
						}
						
						$(".mui-media").each(function(i, n) {
							$(".mui-media")[i].onclick = function() {
								// 分别取得用户号及水表号
								var userIdList = n.getElementsByTagName("span")[3].innerText.substr(4);
								var waterID = n.getElementsByTagName("p")[0].innerText.substr(4);
								// alert(waterID)
								// localStorage.setItem('userIds', JSON.stringify(userIdList));
								// 返回用户号及水表号到meterReading页面
								mui.plusReady(function () {
									var mR = plus.webview.getWebviewById("meterReading.html");
									mui.fire(mR, "select",{userIdList:userIdList, waterID:waterID});
									mui.back();
									// mui.back();
								})
							}
						})
					} else{
						app.setState({});
						plus.webview.getLaunchWebview().show("pop-in");
						setTimeout(function(){
							alert("此账号已在其他设备登录,请重新登录!");
							localStorage.clear();
							plus.runtime.restart();
						},30);
					}
				})
			})
		</script>
	</body>

</html>
